<template>
  <div class="l-echart-imgborder"
       :style="styleSizeName"
       @click="handleClick">
    <div :style="styleImgName"></div>
  </div>
</template>

<script>
import init from "../mixins/common";
export default {
    mixins:[init],
    computed: {
        styleImgName () {
        return Object.assign({
            width: "100%",
            height: "100%",
            backgroundColor:
            this.option.backgroundColor || "rgba(180, 181, 198, 0.1)",
            backgroundClip: "padding-box",
            opacity: this.option.opacity || 1,
            filter: "blur(0px)"
        }, (() => {
            if (this.option.data) {
                return {
                borderImageSource: `url(${this.apiUrl}system/annexesfile/${this.option.data.replace('$BASE_URL','')}?token=${this.token})`,
                borderImageSlice: "10 16 15 10 fill",
                borderWidth: "10px 16px 15px 10px",
                borderStyle: "solid",
                boxSizing: "border-box",
                }
            } else {
                return {}
            }
            
        })())
        }
    },
    methods: {
        handleClick() {
            this.clickFormatter && this.clickFormatter({
                data: this.option.data
            }, this.getItemRefs());
        },
    }
};
</script>

